<template>
  <view class="RefrigeratorB-edit">
    <view class="edit-title">
      <view class="edit-left">{{ $t('RefrigeratorB.EditVue.EditTitle.Text') }}</view>
      <view class="edit-right" @click="closeEidt">{{ $t('RefrigeratorB.EditVue.Confirm.Text') }}</view>
    </view>
    <SimpleSettingCardRB
      v-for="(item, index) in toryListCopy"
      :key="index"
      :name="item.brand"
      :value="item?.expiredDesc"
      :type="item.categoryName"
      :show="isShowEditSelect ? 'left' : 'none'"
      :is-select="item.select"
      :id="item.id"
      @select-me="selectMe"
    ></SimpleSettingCardRB>
    <view class="empty-box"> </view>
    <view class="btn-group">
      <view class="btn-left" @click="selectAll">
        <image src="@/static/Radio.png" v-if="showSelectAll"></image>
        <image src="@/static/RadioEmpty.png" v-else></image>
        {{ $t('RefrigeratorB.EditVue.AllSelect.Text') }}</view
      >
      <button class="btn-right" :disabled="!disabledDel" :class="{ disable: !disabledDel }" @click="delToryItem">
        {{ $t('RefrigeratorB.EditVue.Delete.Text') }}
      </button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import type { RefrigeratorBController, RefrigeratorBToryList } from '@/controller/RefrigeratorB/definition'
import { cloneDeep } from 'lodash'
import SimpleSettingCardRB from '../components/simpleSettingCardRB.vue'
import { deleteInventoryList } from '@/api/refrigetorB'
import { trackEvent, TrackType } from '@/dataReport/tracks'
import { safeTrack } from '@/dataReport/dataReportUtil'
import i18n from '@/i18n'
const props = defineProps<{
  toryList: RefrigeratorBToryList[]
  isLeft: string
  isShowEditSelect: boolean
  control: RefrigeratorBController.Control
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'closeEidt'): void
  (e: 'refshData'): void
}>()
const toryListCopy = ref<RefrigeratorBToryList[]>([])
const disabledDel = ref<boolean>(false)
const isSelect = ref<boolean>(false)
const showSelectAll = ref<boolean>(false)
watch(
  () => props.isShowEditSelect,
  () => {
    toryListCopy.value = cloneDeep(props.toryList)
    toryListCopy.value.map((items) => {
      items.select = false
    })
  }
)
watch(
  () => toryListCopy.value.map((items) => items.select),
  () => {
    disabledDel.value =
      toryListCopy.value.findIndex((items: RefrigeratorBToryList) => items.select === true) === -1 ? false : true
    let checkSelect = toryListCopy.value.findIndex((items: RefrigeratorBToryList) => items.select === false)
    if (checkSelect === -1) {
      showSelectAll.value = true
      isSelect.value = true
    } else {
      showSelectAll.value = false
      isSelect.value = false
    }
  }
)
watch(
  () => props.toryList.length,
  (value) => {
    if (value === 0) {
      closeEidt()
    } else {
      toryListCopy.value = cloneDeep(props.toryList)
    }
  }
)

function selectAll() {
  isSelect.value = !isSelect.value
  toryListCopy.value.map((items) => {
    items.select = isSelect.value
  })
}
function selectMe(id: number | undefined) {
  toryListCopy.value.map((items) => {
    if (items.id === id) {
      items.select = !items.select
    }
  })
}
/**
 * 关闭编辑
 */
function closeEidt() {
  emit('closeEidt')
}
// 删除清单
async function delToryItem() {
  let delList: number[] = []
  toryListCopy.value.map((items) => {
    if (items.select) {
      delList.push(items.id)
    }
  })
  await deleteInventoryList(props.control.store._datasource.haId, {
    inventoryListIds: delList,
  }).then((res) => {
    if (res.code === 0) {
      uni.showToast({ title: i18n.global.t('RefrigeratorB.EditVue.DeleteConfirm.Text') })
      emit('refshData')
    }
    safeTrack(() => {
      trackEvent(
        'delete_item',
        { item_info: delList.join(','), successOrNot: res.code == 0, response_msg: res.msg, error_code: res.code },
        TrackType.ApplianceDetail,
        'RefrigeratorB.Detail.Detete.All.Item'
      )
    })
  })
}
</script>
<style lang="less" scoped>
.disable {
  opacity: 0.4;
}
.RefrigeratorB-edit {
  .edit-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24rpx 0 44rpx;
    padding: 0 32rpx;
    .edit-left {
      color: #2d3746;
      font-size: 64rpx;
      font-weight: 600;
      letter-spacing: 0.12px;
    }
    .edit-right {
      color: var(--primary-blue-medium, #408df2);
      text-align: right;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.5px;
    }
  }
  .empty-box {
    height: 218rpx;
  }

  .btn-group {
    position: fixed;
    bottom: 0rpx;
    display: flex;
    // width: calc(100vw - 64rpx);
    width: 100vw;
    padding-top: 32rpx;
    padding-left: 32rpx;
    padding-bottom: 72rpx;
    background-color: #fff;
    &::after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      width: 100vw;
      height: 1rpx;
      left: 0;
      background-color: rgba(233, 233, 237, 1);
    }
    .btn-right {
      height: 88rpx;
      width: 72%;
      background: var(--primary-petrol, #2d3746);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 28rpx;
      border-radius: 0;
    }
    .btn-left {
      height: 88rpx;
      display: flex;
      align-items: center;
      color: var(--primary-petrol, #333);
      font-size: 32rpx;
      font-weight: 500;
      letter-spacing: -0.429px;
      text-transform: capitalize;

      image {
        height: 40rpx;
        width: 40rpx;
        margin-right: 16rpx;
      }
    }
  }
}
</style>
